<script setup lang="ts">
import {ref} from 'vue'
import lineChart from '../../components/lineChart.vue'
import capsuleChart from '../../components/capsuleChart.vue'
import mapUrl from '../../assets/img/map.jpg'
const config = {
    data: [
        {
            name: '南阳',
            value: 167
        },
        {
            name: '周口',
            value: 67
        },
        {
            name: '漯河',
            value: 123
        },
        {
            name: '郑州77',
            value: 55
        },
        {
            name: '西峡',
            value: 98
        }
    ]
}
const flyline = {
    centerPoint: [0.48, 0.35],
    points: [
        [0.52, 0.23],
        [0.43, 0.29],
        [0.59, 0.35],
        [0.53, 0.47],
        [0.45, 0.54],
        [0.36, 0.38],
        [0.62, 0.55],
        [0.56, 0.56],
        [0.37, 0.66],
        [0.55, 0.81],
        [0.55, 0.67],
        [0.37, 0.29],
        [0.20, 0.36],
        [0.76, 0.41],
        [0.59, 0.18],
        [0.68, 0.17],
        [0.59, 0.10]
    ],
    bgImgUrl: mapUrl
}
const height:number = 200
const lineConfig = {
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: [150, 230, 224, 218, 135, 147, 260],
                type: 'line'
            }
        ]
    }

</script>
<template>
    <div class="module-box">

        <div style="flex:0 1 25%">
            <dv-border-box1 style="width:100%;height:200px;">
                <capsuleChart :config="config" />
            </dv-border-box1>
            <dv-border-box2 style="width:100%;height:200px;">
                <capsuleChart :config="config" />
            </dv-border-box2>
        </div>
        <div style="flex:0 1 50%">
            <dv-border-box4 style="width:100%;height:400px;">
                <dv-flyline-chart :config="flyline" style="width:100%;height:100%;" />
            </dv-border-box4>
        </div>
        <div style="flex:0 1 25%">
            <dv-border-box5 style="width:100%;height:200px;">
                <dv-capsule-chart :config="config" style="width:300px;height:200px" />
            </dv-border-box5>
            <dv-border-box6 style="width:100%;height:200px;">
                <lineChart :gt= 'height' :config = 'lineConfig'/>
            </dv-border-box6>

        </div>

    </div>
</template>